<!--
 * @Author: your name
 * @Date: 2019-11-20 21:46:20
 * @LastEditTime: 2019-11-22 11:23:47
 * @LastEditors: Please set LastEditors
 * @FilePath: \YouYouFo\you-you-go\src\views\goods\AddGoods.vue
 -->
<template>
  <div class="container">
    <van-cell-group>
      <van-field v-model="prodValue" placeholder="请输入商品名称" />
    </van-cell-group>
    <van-button
      @click="addProduct(prodValue)"
      position="top"
      :style="{ height: '20%' }"
      type="info"
      style="width:100%"
    >添加商品</van-button>
    <!-- 顶部消息通知 -->
  </div>
</template>
           
<script>
import { addproduct } from '@/api/index.js'
import { yellowgreen } from 'color-name'
export default {
  data() {
    return {
      prodValue: ''
    }
  },
  methods: {
    async addProduct(name) {
      if (name.trim().length < 1) {
        return this.$toast('请输入规范的内容')
      }
      const { data: res } = await addproduct(name)
      if (res.status !== 0) {
        return this.$toast('添加失败')
      }
      // 成功弹出顶部消息提示
      this.$notify({
        message: '添加成功',
        color: '#fff',
        background: 'yellowgreen',
        duration: 800
      })
      this.$router.push('/search')
    }
  }
}
</script>
<style lang="less" scoped>
.container {
  margin-top: 40px;
  margin-bottom: 50px;
  padding: 0 15px;
  .van-cell-group {
    margin: 20px 0;
  }
  .van-popup {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    background-color: yellowgreen;
  }
}
</style>